import './LeftFloatSprite.scss'
import {Button, Drawer, Input} from "antd";
import {appStore} from "../../stores/modules/app";
import {useEffect, useState} from "react";

export function LeftFloatSprite() {
  const [keyword, setKeyword] = useState<string>('')
  const [spriteName, setSpriteName] = useState<string>('')
  const [list, setList] = useState<string[]>([])
  useEffect(() => {
    const listTemp: string[] = []
    appStore.allSprite?.forEach((_, key) => listTemp.push(key))
    setList(listTemp)
  }, []);
  return <Drawer title="Sprite" open={appStore.leftFloatShow === 'Sprite'} onClose={() => appStore.leftFloatShow = ''}>
    <div className='left-float-sprite'>
      <div className='search'>
        <Input allowClear placeholder="请输入spriteName" value={spriteName}
               onChange={v => setSpriteName(v.target.value)}/>
        <Button type="primary" className='btn' onClick={() => setKeyword(spriteName)}>过滤</Button>
      </div>
      <div className='list'>
        {list.filter(key => key.includes(keyword)).map((key, index) =>
          <div className='item' key={index}>
            <img className='img' src={appStore.allSprite?.get(key)} alt={key}/>
          </div>
        )}
      </div>
    </div>
  </Drawer>
}